<!DOCTYPE html>
<!-- 
  Copyright 2011 Google Inc. All Rights Reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!--
  Google I/O 2011 Google Chart Tools presentation

  Template URL: http://code.google.com/p/io-2011-slides/
-->
<html>
  <head>
    <title>Google I/O</title>

    <meta charset='utf-8' />
    <script
      src='http://io-2011-slides.googlecode.com/svn/trunk/slides.js'></script>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['charteditor']});
    </script>
    <script type="text/javascript" src="js/analysis.js"></script>
    <script type="text/javascript">
    var wrapper, editor = null;

    function runQueryAndOpenEditor() {
      if (editor != null) {
        editor.openDialog(wrapper);
        return;
      }
      wrapper = new google.visualization.ChartWrapper({
        containerId: 'chart',
        chartType: 'ColumnChart',
        options: {isStacked: true}});
      editor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(editor, 'ok', function() {
        chartContainer = document.getElementById('editor-demo-chart-div');
        wrapper = editor.getChartWrapper();
        wrapper.draw(chartContainer);
      });

      var query = new google.visualization.Query(gameQueryUrl);

      // Send the query with a callback function.
      query.setRefreshInterval(10);
      query.send(openEditor);
    }

    function openEditor(response) {
      wrapper.setDataTable(createGameChartData(response.getDataTable()).table);
      if (editor.getDialogPosition() == null) {
        editor.openDialog(wrapper);
      }
    }

    </script> 
  </head>

  <style>
    /* Caption and figures */
    figcaption {
      font-size: 14px;
      color: rgb(155, 155, 155);
    }

    /* Subheaders for slides filled with images */
    article.fill h3.tagged {
      background: rgba(255, 255, 255, 0.9);
      padding: 1em 1em 0.5em 1em;
      font-size: 140%;
      text-align: right;
    }

    article.fill h3.tagged.dark {
      background: rgba(0, 0, 80, 0.9);
      color: white;
    }

    article.fill h4.tagged {
      background: rgba(255, 255, 255, 0.8);
      width: 100%;
      margin: 0;
      padding: 0.5em 1em 0.5em 1em;
      text-align: right;
      box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1);
      border-bottom-left-radius: 5px;
    }

    article.fill h4.tagged.dark {
      background-color: rgba(0, 0, 100, 0.9);
      color: white;
    }

    article.fill h3.panel {
      background: rgba(255, 255, 255, 0.9);
      padding: 0.5em 0 0.5em 1em;
      font-size: 50px;
      width: 300px;
      position: absolute;
      top: 100px;
      right: 0;
      border-bottom-left-radius: 5px;
      border-top-left-radius: 5px;
    }

    article.fill p.panel {
      background: rgba(255, 255, 255, 0.9);
      padding: 1em;
      width: 400px;
      position: absolute;
      top: 200px;
      right: 0;
      border-bottom-left-radius: 5px;
      border-top-left-radius: 5px;
    }

    article.fill figcaption {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0.1em 0.3em;
      background: rgba(255, 255, 255, 0.9);
      border-top-left-radius: 5px;
    }

    .gviz td {
      border: none
    }
  </style>
  <body style='display: none' class='gviz'>

    <section class='slides layout-regular'>

      <article class='biglogo'>
      </article>

      <article>
        <h3>
          Playing the Unique game...
        </h3>
        <h2>
          <a href="http://www.goo.gl/io2011charts" target="_blank">goo.gl/io2011charts</a>
        </h2>
        <iframe style='position: absolute; top: 100px; left: 50px; width: 650px; height: 400px; border: 0 ! important' frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" src="https://spreadsheets.google.com/viewform?hl=en&authkey=CNz_tJ0K&pli=1&formkey=dFNZSXFobGtzTkxHc3puWVNDMUxFSmc6MQ#gid=0"></iframe>
        <iframe style='position: absolute; top: 400px; left: 700px; width: 200px; height: 200px; border: 0 ! important' frameborder="0" scrolling="no" marginwidth="0" marginheight="0" src="iframes/game/unique_gauge.html"></iframe>
      </article>

      <article>
        <h1>
          Using Google Chart Tools
          <br>
          to Create Interactive Dashboards
        </h1>
        <p>
          Michael Fink, Riccardo Govoni and Amit Weinstein
          <br>
          May 10, 2011
        </p>
        <p style='font-size: 0.7em; margin-top: 2em'>
          Feedback
          <a href="http://goo.gl/ZBOCN">http://goo.gl/ZBOCN</a>,
          &nbsp; &nbsp;
          Hashtag
          <strong>#GoogleAPIs</strong>
        </p>
      </article>

      <article>
        <h3>
          Outline
        </h3>
  <table><tr><td>
<ul><li>
        Part 1 - charts for everyone...
</li> <br /> <li>
       Part 2 - hands on session <br />
        <ul>
          <li>
            Apps scripts - charts services
          </li>
          <li>
            Chart wrapper
          </li>
          <li>
            Chart editor
          </li>
          <li>
            Controls and dashboards
          </li>
        </ul>
</li></ud>
  </td><td>
        <p>
          <img class='right' style='height: 200px' src='img/baring_my_heart.png'>
          <figcaption>
            Image Credits: <a href="http://xkcd.com/112/">Randall Munroe</a>
          </figcaption>
        </p>
  </td></tr></table>

      </article>

      <article>
        <h3>
          Motivation
        </h3>
  <table>
    <tr>
      <td>
        democratized cartography...
      </td>
      <td>
              <p>
    <img class='right' style='height: 120px' src='img/MapMaker.png'>
              </p>
      </td>
    </tr>
    <tr>
      <td>
        democratized video...
      </td>
      <td>
              <p>
    <img class='right' style='height: 120px' src='img/YouTube.png'>
              </p>
      </td>
    </tr>
    <tr>
      <td>
              democratized 3D...
      </td>
      <td>
              <p>
    <img class='right' style='height: 120px' src='img/sketchUp.png'>
              </p>
      </td>
    </tr>
  </table>
  Can we democratize data visualization?
      </article>
      
      <article>
        <h3>
          One chart is worth 1,000 images...
        </h3>
        <p>
          <img src='img/gravity_wells.png'
         style='width: 800px'
         alt="Gravity Wells">
          <figcaption>
            Image Credits: <a href="http://xkcd.com/681/">Randall Munroe</a>
          </figcaption>
        </p>
      </article>      

      <article>
        <h3>
          Scatter plots, bar chart and heat maps by xkcd.com
        </h3>
	<table>
	  <tr>
	    <td>
              <img class='right' style='height: 425px' src='img/fuck_grapefruit.png'>
          <figcaption>
            Image Credits: <a href="http://xkcd.com/388/">Randall Munroe</a>
          </figcaption>
	    </td>
	    <td>
              <img class='right' style='width: 270px' src='img/regrets.png'>
              <img class='right' style='width: 270px' src='img/x_girls_y_cups.png'>
	    </td>
	  </tr>
	</table>
      </article>

      <article>
        <h3>
          Our Mission
        </h3>
Make the world’s structured data universally accessible and useful using enticing visualizations
	<table><tr><td>
              Charts for everyone:
              <br>
              <ul>
		<li>
		  Consumers
		</li>
		<li>
		  Developers
		</li>
		<li>
		  Apps / Enterprise
		</li>
              </ul>
	    </td><td>
	      <img class='right' style='height: 360px' src='img/flow_charts.png'>
          <figcaption>
            Image Credits: <a href="http://xkcd.com/518/">Randall Munroe</a>
          </figcaption>
	</td></tr></table>
      </article>

      <article>
        <h3>
          For consumers - new charts in Google Spreadsheets...
        </h3>
        <p>
          <img src='img/chartEditor.png' style="width: 800px" alt="New Chart Editor in Google Spreadsheets">
        </p>
	<a href="https://spreadsheets.google.com/ccc?key=0Avnb9NH3ZzOEdFNZSXFobGtzTkxHc3puWVNDMUxFSmc&hl=en&authkey=CNz_tJ0K&pli=1#gid=1" target="_blank">Unique game votes...</a>
      </article>
      
      <article>
        <h3>Chart for Developers</h3>
        <table>
          <tr>
            <td>
              <ul>
                <li style="margin: 2em 0 3em 0">Chart gallery</li>
                <li style="margin: 3em 0">DataTable</li>
                <li style="margin: 3em 0">DataSources</li>
              </ul>                                
            </td>
            <td>
              <img src="img/visualization_intro.png">
            </td>
          </tr>
        </table>
      </article>

      <article>
        <h3>
          Charts for developers - Highly customizable
        </h3>
        <pre>legend:'bottom', colors:['#226622','#aa6644']</pre>
  <table>
    <tr><td>
              <p>
    <img src='img/ninja_turtles.png' style="width: 280px">
              </p>
          <figcaption>
            Image Credits: <a href="http://xkcd.com/197/">Randall Munroe</a>
          </figcaption>
      </td><td>
        <iframe style='width:500px; height: 400px' width="500" height="400" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"
          src="iframes/ninja/ninja.html"></iframe>
  </td></tr></table>
      </article>

      <article>
        <h3>
          Charts for developers - Highly customizable
        </h3>
        <iframe style='position: absolute; top: 50px; left: 50px; width:800px; height: 500px; border: 0 ! important' width="800" height="500" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"
          src="iframes/gravity/gravityWells1.html"></iframe>
      </article>

      <article>
        <h3>
          Charts for developers - highly customizable.
        </h3>
        <iframe style='position: absolute; top: 50px; left: 50px; width:800px; height: 500px; border: 0 ! important' width="800" height="500" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"
          src="iframes/gravity/gravityWells2.html"></iframe>
      </article>

      <article>
        <h3>
          Charts for developers - <b class='blue'> xkcd </b> vs. <b class='red'> Dilbert </b>
        </h3>
        
        <iframe style='position: absolute; top: 50px; left: 150px; width:600px; height: 500px'
          width="725" height="470" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" 
          src="iframes/geo/xkcd_dilbert.html"></iframe>
      </article>

      <article>
        <h3>
          What else is new?
        </h3>
        <ul> 
          <li> 
            New site: <a href="http://code.google.com/apis/chart/" target="_blank">code.google.com/apis/chart/</a>
          </li> 
          <li> 
            Java data source library - new version
          </li> 
          <li>
            Fusion Tables
          </li>
        </ul>
        
        <iframe style='position: absolute; top: 300px; left: 150px; width:600px; height: 400px'
          width="600" height="400" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" 
          src="iframes/new/candlestick.html"></iframe>

      <img src='img/new_badge.png'
           style='position: absolute; top: 50px; left: 720px; width: 150px'>
      </article>

      <article>
        <h3>
          The Unique game - and the winner is...
        </h3>
        <iframe style='width:800px; height: 450px; border: 0 ! important' frameborder="0" scrolling="no" marginwidth="0" marginheight="0"
          src="iframes/game/unique_results.html"></iframe>
      </article>

      <article>
        <h2>
          Charts in Google Apps Scripts
        </h2>
      </article>

      <article> 
        <h3> 
          What is Google Apps Script?
        </h3> 
        <p> 
          "A JavaScript cloud scripting language that provides
          easy ways to automate tasks across Google products and third party services."
        </p>
        <p> 
          <img class='centered' src="img/apps_script_example.png">
          <img src='img/docs_logo.gif'
              style='position: absolute; top: 310px; left: 50px'>
          <img src='img/gmail_logo.png'
              style='position: absolute; top: 420px; left: 670px'>
          <img src='img/calendar_logo.png'
              style='position: absolute; top: 200px; left: 720px'>
        </p>
        <ul class="build"> 
          <li> 
            So how is this related to charts?
          </li> 
        </ul>
      </article>

      <article> 
        <h3> 
          Built-in support for charts in Google Apps Scripts
        </h3>
        <ul> 
          <li> 
            Generating data
          </li> 
          <li> 
            Embedding dynamic charts (in Google Apps)
          </li> 
          <li>
            Embedding static charts (in Google DocList / email)
          </li>
        </ul>
        <img src='img/soon_badge.png'
            style='position: absolute; top: 60px; left: 720px; width: 150px'>
        <div>
          <img src='img/docs_logo.gif'
              style='position: absolute; top: 370px; left: 190px'>
          <div>
          <img src='img/arrow.png'
              style='position: absolute; top: 420px; left: 130px' width='50' height='40'>
          <img src='img/forms_logo.png'
              style='position: absolute; top: 415px; left: 70px'>
          </div>
          <img src='img/appscript_logo.png'
              style='position: absolute; top: 370px; left: 360px'>
          <div>
          <img src='img/arrow.png'
              style='position: absolute; top: 420px; left: 510px' width='100' height='40'>
          <img src='img/slanted_NUL_chart.png'
              style='position: absolute; top: 310px; left: 510px'>
          <img src='img/gmail_logo.png'
              style='position: absolute; top: 380px; left: 630px'>
        </div>
      </article>

      <article> 
        <h3> 
          The Unique game - Chart generation
        </h3>
        <section>
      <pre>
  // Populating the DataTable.
  var dataTable = Charts.newDataTable()
      .addColumn("Range" , [1, 2, 3, 4, 5, ...])
      .addColumn("Others", [2, 4, 6, 1, 0, ...])
      .addColumn("You"   , [0, 0, 1, 0, 0, ...])
      .addColumn("Winner", [0, 0, 0, 1, 0, ...]);
</pre>
        </section>
        <section>
      <pre>
  // Creating the chart.
  var chart = Charts.newColumnChart()
      .setTitle("Unique Game: The Results")
      .setDimensions(1200, 800)
      .setDataTable(dataTable)
      .setStacked()
      .build();
</pre>
    </section>
      <img src='img/example_NUL_chart.png'
          style='position: absolute; top: 320px; left: 695px; border: solid #CCC 2px' height='100'>
      </article>

      <article>
        <h3>
          The Unique Game - Email the chart
        </h3>
        <section>
      <pre>
  // Creating the chart blob.
  var chartBlob = chart.getBlob().getBytes();

  // Prepare the email attachment.
  var chartFile = [{fileName: "chart.png",
                    mimeType: "image/png",
                    content: chartBlob}];

  // Send the email.
  MailApp.sendEmail(
      "charts@google.com",
      "The unique game results",  // Subject
      "Sorry, you did not win. Better luck next time.",  // Content
      {attachments: chartFile});
</pre>
    </section>
      <img src='img/gmail_logo.png'
          style='position: absolute; top: 80px; left: 730px'>
      </article>

      <article>
        <h2>
          ChartWrapper - Making things simpler
        </h2>
      </article>

      <article>
        <h3>
          ChartWrapper - Before
        </h3>
      <section>
    <pre>
google.load('visualization', '1', {packages: ['corechart']});

function drawVisualization() {
  var query = new google.visualization.Query(
      'http://spreadsheets.google.com/tq?key=abc');
  query.send(handleQueryResponse);
}
    
function handleQueryResponse(response) {
  if (response.isError()) { return; } // Handle error.

  var data = response.getDataTable();
  var container = document.getElementById('chart_div')
  chart = new google.visualization.ColumnChart(container);
  chart.draw(data, {});
}
</pre>
      </section>
      </article>

      <article>
        <h3>
          ChartWrapper - After
        </h3>
      <section>
    <pre>
google.load('visualization', '1');

function drawVisualization() {
  wrapper = new google.visualization.ChartWrapper(
        {dataSourceUrl: 'http://spreadsheets.google.com/tq?key=abc',
         chartType    : 'ColumnChart', 
         containerId  : 'chart_div'});
  wrapper.draw();
}
</pre>
      <div class="build">
<pre>
// We can also easily modify and redraw.
wrapper.setChartType('AreaChart');
wrapper.setOption('title', 'My new AreaChart');
wrapper.draw();
</pre>
      </div>
      <img src='img/new_badge.png'
           style='position: absolute; top: 50px; left: 720px; width: 150px'>
      </section>
      </article>

      <article>
        <h3>
          ChartWrapper - One class that does it all
        </h3>
        <ul>
          <li>
            Create charts from JSON
          </li>
          <li>
            Handles packages and query
          </li>
          <li>
            Modify and redraw easily
          </li>
          <li>
            Serialize (clone/save)
          </li>
          <li>
            Embeddable snippet
          </li>
        </ul>
      <section>
    <pre>
var wrapper = new google.visualization.ChartWrapper({...});
// Serializing the wrapper.
wrapper.toJSON();

// Creating a snippet.
google.visualization.createSnippet(wrapper.toJSON());
</pre>
      </section>
      </article>

      <article>
        <h2>
          Chart Editor
        </h2>
      </article>

      <article> 
        <h3> 
          Chart Editor - Chart creation and customization widget
        </h3>
        <div style='position: absolute; top: 100px; left: 50px'>
        <ul> 
          <li> 
            Auto suggestions
          </li> 
          <li> 
            Instant preview
          </li>
          <li>
            Charts gallery
          </li>
          <li>
            Easy customization
          </li>
        </ul>
    </div>
    <div>
      <div style='position: absolute; top: 100px; left: 450px'>
        As of today, embeddable </br>
        in your site.
      </div>
      <input type="button" style='position: absolute; top: 200px; left: 450px; font-size: 30pt;' value="Open Editor" onclick="runQueryAndOpenEditor()" />          
      <img src='img/new_badge.png'
           style='position: absolute; top: 140px; left: 720px; width: 150px'>
      <div id='editor-demo-chart-div' style='position: absolute; top: 300px; left: 150px; height: 400px; width: 600px;'>
      </div>
    </div>
      </article>

    <article>
      <h3>
        Chart Editor - Example
      </h3>
      <section>
    <pre>
// Create the ChartWrappter.
var chartWrapper = new google.visualization.ChartWrapper({
  dataSourceUrl: url    // Using a remote data source.
});

// Create an editor instance.
var editor = new google.visualization.ChartEditor();

// Listen to the 'ok' button/event.
google.visualization.events.addListener(editor, 'ok', function() {
       editor.getChartWrapper().draw(chartContainer);
    });

// Open the editor's dialog.
editor.openDialog(chartWrapper);
</pre>
      </section>
      </article>
  
      <article>
        <h2>
          Controls and Dashboards
        </h2>
      </article>
      
      <article>
        <div class='build'>
          <img src='img/piechart.png'
              style='position: absolute; top: 90px; left: 70px' width='204' height='193'>
          <img src='img/controls_demoareachart.png'
              style='position:absolute; top: 90px; left: 300px'>

          <img src='img/piechart.png'
              style='position: absolute; top: 310px; left: 70px' width='102' height='95'>
          <img src='img/piechart.png'
              style='position: absolute; top: 310px; left: 170px' width='102' height='95'>
          <img src='img/controls_demogeochart.png'
              style='position:absolute; top: 320px; left: 300px;' width='400'>
          <img src='img/my_dashboard.png'
              style='position: absolute; top: 30px; left: 40px'>
          <div style='position: absolute; top: 40px; left: 500px;'>
            <a style='color:blue; font-family:serif; font-size: 18px;'
               href='#'>Click to reload Map</a><br />
            <a style='color:blue; font-family:serif; font-size: 18px;'
               href='#'>Click to refresh PieChart</a>
          </div>
        </div>
      </article>

      <article>
        <h3>
          Visualizations are helpful
        </h3>
        <p>
          but they offer a single perspective.
        </p>
        <figure style='float:right'>
          <img style='height: 400px' src='img/bursill.png'>
          <figcaption style='text-align:right'>
            Image credits:
            <a href="http://www.gutenberg.org/files/12962/12962-h/12962-h.htm" alt="Hand shadows">
                Hand Shadows To Be Thrown Upon The Wall, Henry Bursill</a>
          </figcaption>
        </figure>
      </article>

      <article class='fill'>
        <h3 class='tagged dark'>
          Wiring is hard
        </h3>
        <h4 class='tagged dark'>
            when you want multiple visualizations to play together
        </h4>
        <figure>
          <img src='img/circuit_diagram.png' style="width: 900px" alt="Ethernet cables connected to a router">
          <figcaption>
            Image Credits: <a href="http://xkcd.com/730/">Randall Munroe</a>
          </figcaption>
        </figure>
      </article>

      <article class='fill'>
        <h3 class='panel'>
          Control
        </h3>
        <p class='panel'>
          A simple way to drive the data that power one or more visualizations.
        </p>
        <figure>
          <img src='img/switch.jpg' style="width: 900px; height: 700px" alt="A light switch">
          <figcaption>
            Image credits: <a href="http://www.sxc.hu/photo/469552">Piotr Lewandowski</a>
          </figcaption>
        </figure>
      </article>

      <article class='nobackground'>
        <h3>
          Controls gallery
        </h3>

        <iframe src='iframes/controlsgallery/controlsgallery.html'></iframe>
      </article>

      <article>
        <figure style='float:left; margin-left: -30px; margin-top: 60px'>
          <img style='height: 400px' src='img/analytics.png' alt="Google Analytics dashboard screenshot">
        </figure>
        <h3 style="margin-top: 2em">Dashboard</h3>
        <p style="line-height: 150%">
          A collection of collaborating controls and visualizations, sharing the same underlying data.
        </p>
      </article>
      
      <article class="smaller">
        <h3>How do Controls and Dashboard work?</h3>
        <div class="build">
          <!-- Ordering matters for the fade-in effect -->
          <!-- Spacing in PRE sections matter as well, for alignment -->
          <img src='img/piechart.png' 
              style='position: absolute; top: 70px; left: 610px' width='204' height='193'>
          <pre style='position: absolute; top: 225px; left: 60px; width: 780px'>










  new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'options': {'legend': 'right'},
    'containerId': 'chartContainerElement'})
           
                  </pre>
          <img src='img/slider.png'
              style='position: absolute; top: 135px; left: 310px' width='172' height='32'>
<pre style='position: absolute; top: 225px; left: 60px; width: 780px'>


  <b>new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'options' {
      'filterColumnLabel': 'Salary',
      'minValue': 10, 'maxValue': 100},
    'containerId': 'controlContainerElement'})</b>



  new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'options': {'legend': 'right'},
    'containerId': 'chartContainerElement'})

                 </pre>
          <img src='img/arrow.png'
              style='position: absolute; top: 130px; left: 500px' width='100' height='60'>
<pre style='position: absolute; top: 225px; left: 60px; width: 780px'>
<b>new google.visualization.Dashboard(dashboardElement).bind([</b>

  new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'options': {
      'filterColumnLabel': 'Salary',
      'minValue': 10, 'maxValue': 100},
    'containerId': 'controlContainerElement'})

<b>],[</b>

  new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'options': {'legend': 'right'},
    'containerId': 'chartContainerElement'})

<b>])</b></pre>
          <img src='img/database.png'
              style='position: absolute; top: 85px; left: 60px; z-index:2' width='154' height='154'>
          <img src='img/arrow.png'
              style='position: absolute; top: 130px; left: 190px' width='100' height='60'>
<pre style='position: absolute; top: 225px; left: 60px; width: 780px'>
new google.visualization.Dashboard(dashboardElement).bind([

  new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'options': {
      'filterColumnLabel': 'Salary',
      'minValue': 10, 'maxValue': 100},
    'containerId': 'controlContainerElement'})

],[

  new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'options': {'legend': 'right'},
    'containerId': 'chartContainerElement'})

])<b>.draw(dataTable);</b></pre>
        </div>
      </article>

      <article>
        <h3>google.visualization.ChartWrapper</h3>
        <p>
          Simple wrapper around all chart types. Dead simple.
        </p>
        <section>
        <pre>
var wrapper = new google.visualization.ChartWrapper({
  'chartType': 'GeoChart',
  'dataTable': myData,
  'containerId': 'geoElementId',
  'options': {}
});
wrapper.draw();

// Change colors and redraw.
wrapper.setOption('colors', [ '#D6F1FF', '#0A43BF' ]);
wrapper.draw();

// Serialize to JSON
var json = wrapper.toJSON();</pre>
        </section>
      </article>

      <article>
        <h3>google.visualization.ControlWrapper</h3>
        <p>
          UI element that collects user input and drives visualizations.
        </p>
        <img src='img/new_badge.png'
            style='position: absolute; top: 140px; left: 720px; width: 150px'>
        <section>
        <pre>
var wrapper = new google.visualization.ControlWrapper({
  'controlType': 'NumberRangeFilter',
  'containerId': 'controlElementId',
  'options': {
    'filterColumnLabel': 'salary',
    'minValue': 100,
    'maxValue': 1000
    },
  'state': {'lowValue': 200, 'highValue': 600}
});

// Change the Control state programmatically
wrapper.setState({'lowValue': 400, 'highValue': 800});

wrapper.setOption('minValue', 0); // And the options too..</pre>
        </section>
      </article>

      <article>
        <h3>google.visualization.Dashboard</h3>
        <p>
          Takes care of all the plumbing so you don't have to.
        </p>
        <img src='img/new_badge.png'
            style='position: absolute; top: 140px; left: 720px; width: 150px'>
        <section>
        <pre>
var dashboard = new google.visualization.Dashboard(
  document.getElementById('container'));

// Have one or more Controls affect one or more Charts.
dashboard.bind(
  [controlWrapper1, controlWrapper2],
  [chartWrapper1, chartWrapper2, chartWrapper3]);

// Controls can also affect each other.
dashboard.bind(controlWrapper1, controlWrapper2);

// Draw the entire dashboard.
dashboard.draw(dataTable);</pre>
        </section>
      </article>

      <article class='fill'>
        <h3 class='panel'>
          Demo
        </h3>
        <figure>
          <img src='img/blueprint.jpg' style="width: 900px; height: 700px" alt="A blueprint sketch">
          <figcaption>
            Image credits: <a href="http://www.morguefile.com/archive/display/129150">Kahana, O'ahu</a>
          </figcaption>
        </figure>
      </article>

      <article class='nobackground'>
        <h3>Pretending to be Hans Rosling</h3>
        <iframe style='width:725px; height: 500px' width="725" height="500" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" src="http://www.google.com/publicdata/explore/embed?ds=d5bncppjof8f9_&amp;ctype=b&amp;met_x=sp_dyn_le00_in&amp;scale_x=lin&amp;ind_x=false&amp;met_y=sp_dyn_tfrt_in&amp;scale_y=lin&amp;ind_y=false&amp;met_s=sp_pop_totl&amp;scale_s=lin&amp;ind_s=false&amp;dimp_c=country:region&amp;ifdim=country&amp;hl=en_US&amp;dl=en_US"></iframe>
        </article>

      <article class='fill'>
        <iframe frameborder="0" scrolling="no" marginwidth="0" marginheight="0"
          src="iframes/editor/editor.html"></iframe>
      </article>

      <article>
        <h3>Watch your steps!</h3>
        <p>
          Controls are experimental<br />
          (they might break and change over time).
        <p>

        <h4>
          But...
        </h4>
        <div class="build">
          <p>
            Will improve and evolve listening to your feedback.
          </p>
          <p>
            We have a lot of features coming down the pipe.
          </p>
          <p>
            <strong>
              Use them and let us know about your experience.
            </strong>
          </p>
        </div>
      </article>

      <article class='smaller'>
        <h3>
          Thanks!
        </h3>
        <figure style='text-align: right; margin-top: -1.5em;'>
          <img src='img/qa.png'>
          <figcaption>
            Image Credits: <a href="http://xkcd.com/523/">Randall Munroe</a>
          </figcaption>
        </figure>        
        <ul>
          <li style='margin-bottom: 2em'>
            <a style='font-size: 150%' href="http://code.google.com/apis/chart">
              code.google.com/apis/chart</a>
          </li>
          <li>
            This presentation<br />
            <a href="http://code.google.com/p/google-visualization-io2011/">
              code.google.com/p/google-visualization-io2011/</a>
          </li>
          <li>
            Feedback<br />
            <a href="http://goo.gl/ZBOCN">http://goo.gl/ZBOCN</a>
          </li>
          <li>
            Hashtag<br />
            <strong>#GoogleAPIs</strong>
          </li>
        </ul>
      </article>
    </section>

  </body>
</html>
